<template>
    <div class="row">
    <div class="col-md-8 col-md-offset-2">
        <form bridgeSorts="form" @submit.prevent="submit">
            <!-- age_id -->
            <div class="form-group" :class="{'has-error': errors.has('age_id')}">
                <label for="age_id-field">所属年代：</label>
                <select v-model="bridge.age_id" v-validate data-vv-rules="required" data-vv-as="所属分类"
                        name="age_id" id="age_id-field" class="form-control">
                    <option value="0">-请选择所属年代-</option>
                    <option v-for="item in ages" v-bind:value="item.id">{{ item.name }}</option>
                </select>

                <!-- error msg -->
                <span v-show="errors.has('age_id')" class="help-block">{{ errors.first('age_id') }}</span>
            </div>

            <!-- type_id -->
            <div class="form-group" :class="{'has-error': errors.has('type_id')}">
                <label for="type_id-field">所属类型：</label>
                <select v-model="bridge.type_id" v-validate data-vv-rules="required" data-vv-as="所属类型"
                        name="type_id" id="type_id-field" class="form-control">
                    <option value="0">-请选择所属类型-</option>
                    <option v-for="item in types" v-bind:value="item.id">{{ item.name }}</option>
                </select>

                <!-- error msg -->
                <span v-show="errors.has('type_id')" class="help-block">{{ errors.first('type_id') }}</span>
            </div>

            <!-- level_id -->
            <div class="form-group" :class="{'has-error': errors.has('level_id')}">
                <label for="level_id-field">所属级别：</label>
                <select v-model="bridge.level_id" v-validate data-vv-rules="required" data-vv-as="所属级别"
                        name="level_id" id="level_id-field" class="form-control">
                    <option value="0">-请选择所属级别-</option>
                    <option v-for="item in levels" v-bind:value="item.id">{{ item.name }}</option>
                </select>

                <!-- error msg -->
                <span v-show="errors.has('level_id')" class="help-block">{{ errors.first('level_id') }}</span>
            </div>

            <!-- bridge_name -->
            <div class="form-group" :class="{'has-error': errors.has('bridge_name')}">
                <label for="bridge_name-field">名称：</label>
                <input v-model="bridge.bridge_name" v-validate data-vv-rules="required" data-vv-as="名称"
                       type="text" name="bridge_name" id="bridge_name-field" class="form-control">

                <!-- error msg -->
                <span v-show="errors.has('bridge_name')" class="help-block">{{ errors.first('bridge_name') }}</span>
            </div>

            <!-- couplet -->
            <div class="form-group" :class="{'has-error': errors.has('couplet')}">
                <label for="couplet-field">桥联：</label>
                <input v-model="bridge.couplet" v-validate data-vv-rules="required" data-vv-as="桥联"
                       type="text" name="couplet" id="couplet-field" class="form-control">

                <!-- error msg -->
                <span v-show="errors.has('couplet')" class="help-block">{{ errors.first('couplet') }}</span>
            </div>

            <!-- adorn -->
            <div class="form-group" :class="{'has-error': errors.has('adorn')}">
                <label for="adorn-field">桥饰：</label>
                <input v-model="bridge.adorn" v-validate data-vv-rules="required" data-vv-as="桥饰"
                       type="text" name="adorn" id="adorn-field" class="form-control">

                <!-- error msg -->
                <span v-show="errors.has('adorn')" class="help-block">{{ errors.first('adorn') }}</span>
            </div>

            <!-- name -->
            <div class="form-group" :class="{'has-error': errors.has('longitude')}">
                <label for="longitude-field">经度：</label>
                <input v-model="bridge.longitude" v-validate data-vv-rules="required" data-vv-as="经度"
                       type="text" name="author" id="longitude-field" class="form-control">

                <!-- error msg -->
                <span v-show="errors.has('longitude')" class="help-block">{{ errors.first('longitude') }}</span>
            </div>

            <!-- latitude -->
            <div class="form-group" :class="{'has-error': errors.has('latitude')}">
                <label for="latitude-field">维度：</label>
                <input v-model="bridge.latitude" v-validate data-vv-rules="required" data-vv-as="维度"
                       type="text" name="author" id="latitude-field" class="form-control">

                <!-- error msg -->
                <span v-show="errors.has('latitude')" class="help-block">{{ errors.first('latitude') }}</span>
            </div>

            <!-- name -->
            <div class="form-group" :class="{'has-error': errors.has('front_cover')}">
                <label for="front_cover-field">封面照片：</label>
                <br>
                <button id="front_cover-field" class="btn btn-default" type="button">选择文件</button>
                <br>
                <img v-bind:src="bridge.front_cover" alt="" v-show="bridge.front_cover" class="margin-top-10 thumbnail" width="171" height="180">

                <!-- error msg -->
                <span v-show="errors.has('front_cover')" class="help-block">{{ errors.first('front_cover') }}</span>
            </div>

            <!-- introduction -->
            <div class="form-group" :class="{'has-error': errors.has('introduction')}">
                <label for="introduction-field">古桥简介：</label>
                <textarea v-model="bridge.introduction"
                          name="introduction" id="introduction-field" cols="30" rows="10" class="hidden"></textarea>
                <div id="div1"></div>

                <!-- error msg -->
                <span v-show="errors.has('introduction')" class="help-block">{{ errors.first('introduction') }}</span>
            </div>

            <!-- journal -->
            <div class="form-group" :class="{'has-error': errors.has('journal')}">
                <label for="journal-field">历代桥志：</label>
                <textarea v-model="bridge.journal"
                          name="journal" id="journal-field" cols="30" rows="10" class="hidden"></textarea>
                <div id="div2"></div>

                <!-- error msg -->
                <span v-show="errors.has('journal')" class="help-block">{{ errors.first('journal') }}</span>
            </div>

            <!-- journal -->
            <div class="form-group" :class="{'has-error': errors.has('heritage_list')}">
                <label for="heritage_list-field">遗产名录：</label>
                <textarea v-model="bridge.heritage_list"
                          name="heritage_list" id="heritage_list-field" cols="30" rows="10" class="hidden"></textarea>
                <div id="div3"></div>

                <!-- error msg -->
                <span v-show="errors.has('heritage_list')" class="help-block">{{ errors.first('heritage_list') }}</span>
            </div>

            <!-- attractions -->
            <div class="form-group" :class="{'has-error': errors.has('attractions')}">
                <label for="heritage_list-field">古桥景点：</label>
                <textarea v-model="bridge.attractions"
                          name="attractions" id="attractions-field" cols="30" rows="10" class="hidden"></textarea>
                <div id="div4"></div>

                <!-- error msg -->
                <span v-show="errors.has('attractions')" class="help-block">{{ errors.first('attractions') }}</span>
            </div>

            <!-- bridge_type -->
            <div class="form-group" :class="{'has-error': errors.has('bridge_type')}">
                <label for="bridge_type-field">桥梁形式：</label>
                <textarea v-model="bridge.bridge_type"
                          name="bridge_type" id="bridge_type-field" cols="30" rows="10" class="hidden"></textarea>
                <div id="div5"></div>

                <!-- error msg -->
                <span v-show="errors.has('bridge_type')" class="help-block">{{ errors.first('bridge_type') }}</span>
            </div>

            <!-- feature -->
            <div class="form-group" :class="{'has-error': errors.has('feature')}">
                <label for="adorn-field">技艺特点：</label>
                <textarea v-model="bridge.feature"
                          name="feature" id="feature-field" cols="30" rows="10" class="hidden"></textarea>
                <div id="div6"></div>

                <!-- error msg -->
                <span v-show="errors.has('feature')" class="help-block">{{ errors.first('feature') }}</span>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary">提交</button>
                <button type="button" onclick="window.history.back();" class="btn btn-default">返回</button>
            </div>
        </form>

    </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            // 初始化编辑器
            var E = window.wangEditor
            var editor = new E('#div1')
            editor.customConfig.onchange = (html) => {
                // 监控变化，同步更新到 textarea
                this.bridge.introduction = html;
            }
            editor.customConfig.uploadImgServer = '/admin/bridges';
            editor.customConfig.uploadImgHeaders = {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            };
            editor.customConfig.uploadFileName = 'bridges'
            editor.create()
            // 初始化 textarea 的值
            this.bridge.introduction = editor.txt.html();

            var editor1 = new E('#div2')
            editor1.customConfig.onchange = (html) => {
                // 监控变化，同步更新到 textarea
                this.bridge.journal = html;
            }
            editor1.customConfig.uploadImgServer = '/admin/bridges';
            editor1.customConfig.uploadImgHeaders = {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            };
            editor1.customConfig.uploadFileName = 'bridges'
            editor1.create()
            // 初始化 textarea 的值
            this.bridge.journal = editor1.txt.html();

            var editor2 = new E('#div3')
            editor2.customConfig.onchange = (html) => {
                // 监控变化，同步更新到 textarea
                this.bridge.heritage_list = html;
            }
            editor2.customConfig.uploadImgServer = '/admin/bridges';
            editor2.customConfig.uploadImgHeaders = {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            };
            editor2.customConfig.uploadFileName = 'bridges'
            editor2.create()
            // 初始化 textarea 的值
            this.bridge.heritage_list = editor2.txt.html();

            var editor3 = new E('#div4')
            editor3.customConfig.onchange = (html) => {
                // 监控变化，同步更新到 textarea
                this.bridge.attractions = html;
            }
            editor3.customConfig.uploadImgServer = '/admin/bridges';
            editor3.customConfig.uploadImgHeaders = {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            };
            editor3.customConfig.uploadFileName = 'bridges'
            editor3.create()
            // 初始化 textarea 的值
            this.bridge.attractions = editor3.txt.html();

            var editor4 = new E('#div5')
            editor4.customConfig.onchange = (html) => {
                // 监控变化，同步更新到 textarea
                this.bridge.bridge_type = html;
            }
            editor4.customConfig.uploadImgServer = '/admin/bridges';
            editor4.customConfig.uploadImgHeaders = {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            };
            editor4.customConfig.uploadFileName = 'bridges'
            editor4.create()
            // 初始化 textarea 的值
            this.bridge.bridge_type = editor4.txt.html();

            var editor5 = new E('#div6')
            editor5.customConfig.onchange = (html) => {
                // 监控变化，同步更新到 textarea
                this.bridge.feature = html;
            }
            editor5.customConfig.uploadImgServer = '/admin/bridges';
            editor5.customConfig.uploadImgHeaders = {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            };
            editor5.customConfig.uploadFileName = 'bridges'
            editor5.create()
            // 初始化 textarea 的值
            this.bridge.feature = editor5.txt.html();
            // editor end

            // 获取分类信息
            this.get('bridges/create').then(response => {
                this.ages = response.ages;
                this.types = response.types;
                this.levels = response.levels;
            });

            //实例化一个plupload上传对象
            var uploader = new plupload.Uploader({
                browse_button : 'front_cover-field', //触发文件选择对话框的按钮，为那个元素id
                url :  '/admin/bridges', //服务器端的上传页面地址
                file_data_name: 'bridges',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            //在实例对象上调用init()方法进行初始化
            uploader.init();

            //绑定各种事件，并在事件监听函数中做你想做的事
            uploader.bind('FilesAdded',function(uploader,files){
                uploader.start();
            });
            uploader.bind('FileUploaded',(uploader,file,responseObject) => {
                var response = JSON.parse(responseObject.response);
                this.bridge.front_cover = response.data[0];
            });
        },
        data(){
            return {
                ages: [],
                types: [],
                levels: [],
                bridge: {
                    age_id: 0,
                    type_id: 0,
                    level_id: 0,
                    bridge_name: '',
                    couplet: '',
                    adorn: '',
                    front_cover: '',
                    longitude: '',
                    latitude: '',
                    introduction: '',
                    journal: '',
                    heritage_list: '',

                },
            }
        },
        methods: {
            /**
             * 提交表单
             */
            submit(){
                this.$validator.validateAll().then(result => {
                    if(result){
                       console.log(this.bridge);

                        this.post('bridges', this.bridge).then(response => {
                            this.alert('古桥创建成功！');
                            window.history.back();
                        });
                    }
                });
            },
        },
        computed: {

        },
    }
</script>
